// 项目 JS 的入口文件   
import Vue from 'vue';

// 配置路由
// 1.1 导入路由模块
import VueRouter from 'vue-router';
// 1.2 安装路由
Vue.use(VueRouter);

// 2.1 导入 vue-resource 模块
import VueResource from 'vue-resource'
// 2.2 安装 vue-resource 
Vue.use(VueResource);

// 导入 vuex
import Vuex from 'vuex';
// 安装 Vuex
Vue.use(Vuex);

// 每次刚进入网站时候，肯定会调用 main.js ，在刚调用它时，先从本地村冲中获取 购物车的数据，放到 store 共享数据中
var carShopData = JSON.parse(localStorage.getItem('car') || '[]');

// 创建共享数据
var store = new Vuex.Store({
    state:{  // this.$store.state.数据名称
        // 可以将这个 state 想象为 组件中的 data，专门用来存储数据的
       car: carShopData, // 将购物车商品的数据，用数组存储起来，在 car 数组中存储一些商品的对象，可以暂时将这个商品对象设计成这样：{id:商品id,count:购买的数量,price:商品的单价,selected: flase}
       total: 0,
    },    
    mutations:{ // this.$store.commit.('方法名称', '按需传递唯一的参数')
        // 在 mutations 中的 函数 最多只能接收 两个参数 ，第一个永远是 state
            addToCar(state, goodsinfo1){ // 点击加入购物车 ，将拼接出的商品属性保存到state 中的car 数组里
                /* 
                    分析：
                        1. 如果购物车中之前有对应的商品，只需要更新数量即可 
                        2. 如果购物车中没有对应的商品，直接将商品数据 push 到 car 中即可
                */

                // 因为我们只需要找到该商品信息后，就停止，所以不需要用到 forEeach
                var carFlag = false; // 假设 购物车中没有该商品
                state.car.some(item => {
                    if(item.id == goodsinfo1.id) {
                        item.count += parseInt(goodsinfo1.count);
                        carFlag = true;
                        return true;
                    }
                });

                // 如果最终，循环完毕的到的 carFlag 还是 false, 则把商品直接 push 到 购物车中
                if(!carFlag){
                    state.car.push(goodsinfo1);
                }

                // 当更新 car 之后 ，把 car 数组存储到 localStoreage 中,实现商品永久化存储
                localStorage.setItem('car',JSON.stringify(state.car));
            },
            totalCar(state){
                state.car.forEach(item => {
                    state.total += item.count;
                });
                console.log(state.total);
            },
            updateGoodsinfo(state, goodsinfo){ // 修改购物车中商品的数量值信息
                // 分析
                state.car.some(item=>{
                    if(item.id == goodsinfo.id){
                        item.count = parseInt(goodsinfo.count);
                        return true;
                    }
                });
                // 当修改完 信息后 需要将新的数据 保存到内存中
                localStorage.setItem('car',JSON.stringify(state.car));
            },
            removeFormCar(state, id){
                // 根据 id，从 store 中的购物车中删除对应的那条商品数据
                state.car.some((item,i)=>{
                    if(item.id == id){
                        state.car.splice(i,1);
                        return true;
                    }
                });
                // 当修改完 信息后 需要将新的数据 保存到内存中
                localStorage.setItem('car',JSON.stringify(state.car));
            },
            upatateGoodsSelected(state, selected_info){
                state.car.some( item=> {
                    if(item.id == selected_info.id){
                        item.selected = selected_info.status_val;
                        return true;
                    }
                });
                // 当修改完 状态信息后 需要将新的数据 保存到内存中
                localStorage.setItem('car',JSON.stringify(state.car));    
            }
    },
    getters: { // this.$store.getter.操作名称 相当于计算属性 也相当于 filter
        // 在 getters 中的 函数 第一个永远是 state
        // 注意：这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations
        getAllCount: function (state) {
            var c = 0;
            state.car.forEach( item => {
                c += item.count;
            });
            return c;
        },
        getGoodsCount(state){  // 解决 购物车中 同步购买数量的方法
            var o = {};
            state.car.forEach( item=> {
                o[item.id] = item.count;
            });
            return o;
        },
        getGoodsSelected(state){ // 获取每个商品的选中状态
            var o = {};
            state.car.forEach( item => {
                o[item.id] = item.selected;
            });
            return o;
        },
        getGoodsCount_Amount(state){
            var C_A ={ count:0, amount:0 };  // 勾选的商品总数量，勾选商品的总价格
            state.car.forEach( item=> {
                if(item.selected){
                    C_A.count += item.count;
                    C_A.amount += item.count * item.price;
                }
            });
            return C_A;
        }
    }
});

// 全局部署 http 请求的根路径
Vue.http.options.root = 'http://api.cms.liulongbin.top';
// 设置全局 post 的手表单数据格式的组织形式
Vue.http.options.emulate = true;

// 导入 MUI 的样式
import './lib/MUI/css/mui.min.css';

// 导入 MUI 的 icon 的样式
import './lib/MUI/css/icons-extra.css';

// 按需导入 UI中的 组件
/* import { Header, Swipe, SwipeItem , Button , Lazyload } from 'mint-ui';
Vue.component(Header.name, Header);
// 轮播图
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(Lazyload); */

// 因为懒加载使用按需导入 不显示 现在使用全部倒入
import MintUI from 'mint-ui';
Vue.use(MintUI);
import 'mint-ui/lib/style.css';

// 导入 moment 时间插件
import moment from 'moment'
// 定义全局过滤器
Vue.filter('dateFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern);
});

// 导入 vue-preview 插件
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)

// 1.3 导入 自己的router.js(如果有单独定义的，导入即可，不需要再下方写了)
import router from './router.js';

// 导入 app.vue 根组件
import app from '../src/app.vue';

var vm = new Vue({
    el:'#app',
    render: c => c(app), // 挂在 APP 组件
    // 1.4 在 vm 实例中 挂载 路由对象
    router,
    store, // 挂在 store 状态管理模式 vuex;
});